<template>
    <div>
        <c-title text="门店销售额排名"></c-title>
        <van-tabs v-model="active" @click="tabHandel" color="var(--themeBaseColor)"
            title-active-color="var(--themeBaseColor)">
            <van-tab title="门店" name="1"></van-tab>
            <van-tab title="收银台" name="2"></van-tab>
        </van-tabs>
        <div class="head">
            <span>日期选择</span>
            <span @click="handle_popup">{{ tips_date ? tips_date : '请选择日期' }}</span>
        </div>

        <div class="content">
            <div class="content-wrapper">
                <div class="head-1">排名</div>
                <div class="head-2">门店id</div>
                <div class="head-2">门店名称</div>
                <div class="head-2">营业额</div>
                <div class="head-2">交易完成额</div>
                <div class="head-2">已提现收入</div>
                <div class="head-2">提现中收入</div>
                <div class="head-2">未提现收入</div>
            </div>
            <div class="content-wrapper" v-for="(item, index) in list">
                <div class="head-1">{{ from_page + index }}</div>
                <div class="head-2">{{ item.id }}</div>
                <div class="head-2">{{ item.name }}</div>
                <div class="head-2">{{ item.turnover }}</div>
                <div class="head-2">{{ item.complete_turnover }}</div>
                <div class="head-2">{{ item.withdraw }}</div>
                <div class="head-2">{{ item.withdrawing }}</div>
                <div class="head-2">{{ item.un_withdraw }}</div>
            </div>
        </div>
        <div class="footer" v-if="page_list && page_list.length !== 0">
            <div class="box">
                <div class="box-left" :class="{ 'not': current_page == 1 }" @click="pre_handle">上一页</div>
                <div class="box-center" v-for="item in page_list" @click="page_handle(item)"
                    :class="{ 'current-page': current_page == item }">{{ item }}</div>
                <div class="box-right" :class="{ 'not': current_page == last_page }" @click="next_handle">下一页</div>
            </div>
        </div>

        <van-popup v-model="show" round position="bottom">
            <div>
                <div class="flex-a-c flex-j-sb" style="padding: 1.4375rem  .7188rem 0;">
                    <span @click="show = false">取消</span>
                    <span>选择日期</span>
                    <span @click="submit">确认</span>
                </div>
                <div class="choose-content">
                    <div class="date-btn" @click="handle_btn(0)" :class="{ 'highlight': current_index_date == 0 }">日
                    </div>
                    <div class="date-btn" @click="handle_btn(1)" :class="{ 'highlight': current_index_date == 1 }"
                        style="margin: 0 .625rem;">周</div>
                    <div class="date-btn " @click="handle_btn(2)" :class="{ 'highlight': current_index_date == 2 }">月
                    </div>
                </div>
                <div class="line"></div>
                <div class="current-date flex-a-c">
                    <div class="left" @click="handle_month('pre')"><i class="iconfont icon-icon_more11"
                            style="transform: rotate(180deg) scaleY(-1);display: inline-block;"></i></div>
                    <div style="margin: 0 1.6563rem;">
                        <template v-if="current_index_date == 2">
                            {{ current_year }}年
                        </template>
                        <template v-else>
                            {{ current_date }}
                        </template>
                    </div>
                    <div class="left" @click="handle_month('next')"><i class="iconfont icon-icon_more11"></i></div>
                </div>
                <template v-if="current_index_date == 0">
                    <div class="week-group">
                        <div v-for="item in week">{{ item }}</div>
                    </div>
                    <div class="month-group">
                        <div v-for="(item, index) in month_date" @click="tapDay(item)"
                            :class="{ 'default-today': item.today == current_today && item.date !== choose_date, 'c-C0C4CC': !item.is_month, 'choose-index': item.date == choose_date && item.type == 'current' }">
                            {{ item.date }}</div>
                    </div>
                </template>
                <template v-else-if="current_index_date == 1">
                    <div class="week-group">
                        <div v-for="item in week">{{ item }}</div>
                    </div>
                    <div class="month-group">
                        <div v-for="(item, index) in month_date" @click="tapWeek(item, index)"
                            :class="{ 'default-today': item.today == current_today && !weeks_index.includes(index),
                             'middleDays': weeks_index.includes(index) && choose_weeks == item.choose_weeks,
                             'middleDays-left': weeks_index.includes(index) && choose_weeks == item.choose_weeks&&weeks_index[0]==index,
                             'middleDays-right': weeks_index.includes(index) && choose_weeks == item.choose_weeks&&weeks_index[weeks_index.length-1]==index,
                            'c-C0C4CC': !item.is_month, 'choose-index': (index == firstDayIndex || index == lastDayIndex) && choose_weeks == item.choose_weeks }">
                            {{ item.date }}</div>
                    </div>
                </template>
                <template v-else>
                    <div class="month-line"></div>
                    <div v-for="(item, index) in months" class="month-item">
                        <div :class="{ 'month-item-current': index == month_index, 'default-month': item == default_month && index !== month_index && current_year == new Date().getFullYear() }"
                            @click="tapMonth(item, index)">{{ item }}</div>
                    </div>
                </template>
            </div>

        </van-popup>
    </div>
</template>

<script>
export default {
    data() {
        return {

            page_list: [],
            list: [],
            choose_weeks: '',

            lastDayIndex: null,
            firstDayIndex: null,
            month_index: null,
            active: "1",
            current_date: "",
            show: false,
            current_index_date: 0,
            week: ['日', '一', '二', '三', '四', '五', '六'],
            months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            daysInMonth: [], // 存储当月日期数组
            current_year: '',
            current_month: '',
            month_date: [],
            choose_date: '',
            default_month: '',
            middleDays: [],//选中周的其中日期
            firstDay: "",
            lastDay: "",
            weeks_index: [],
            prv_total: 0,
            next_total: 0,
            tips_date: "",
            tips_date_timestamp: "",
            current_page: 1,
            last_page: 1,
            from_page:1,
            current_today: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate()}`
        };
    },
    mounted() {
        this.init();
        this.getData();
    },
    methods: {
        init() {
            this.page_list = [];
            this.current_page = 1;
            const currentDate = new Date();
            this.current_year = currentDate.getFullYear();
            this.current_month = currentDate.getMonth();
            this.current_date = `${currentDate.getFullYear()}年${currentDate.getMonth() + 1}月`;
            this.default_month = `${currentDate.getMonth() + 1}月`;
            this.daysInMonth = this.getDaysInCurrentMonth(); // 调用新方法
            this.month_date = this.getDaysInCurrentMonth(currentDate.getFullYear(), currentDate.getMonth())
        },
        page_handle(item) {
            this.current_page = item;
            this.getData(item)
        },
        pre_handle() {
            if (this.current_page == 1) return;
            let page = this.current_page - 1;
            this.getData(page);

        },
        next_handle() {
            if (this.current_page == this.last_page) return;
            let page = this.current_page + 1;;
            this.getData(page);
        },
        tabHandel() {
            this.getData();
        },
        getData(page = 1) {
            let json = {
                page,
                rank_type: this.active,
            }
            if (this.tips_date_timestamp) {
                json.time = this.tips_date_timestamp
            }
            if (this.current_index_date) {
                json.time_type_name = this.current_index_date == 1 ? 'week' : 'month'
            }
            if (this.current_index_date == 0) {
                json.time_type_name = 'day';
            }
            $http.post('plugin.shop-assistant.frontend.index.get-store-rank', json, '.').then(res => {
                let { result, msg, data } = res;
                if (result) {
                    this.from_page = data.from;
                    this.current_page = data.current_page;
                    this.last_page = data.last_page;
                    if (this.page_list.length == 0) {
                        let arr = [1, 2, 3, 4, 5].slice(0, data.last_page);
                        arr.forEach(item => {
                            this.page_list.push(item);
                        })
                    } else if (page >= 5 && this.page_list[this.page_list.length - 1] == page && page < this.last_page) {
                        this.page_list = [];
                        this.page_list = [page - 3, page - 2, page - 1, page, page + 1];
                    } else if (page == this.page_list[0] && page > 1) {
                        this.page_list = [];
                        this.page_list = [page - 1, page, page + 1, page + 2, page + 3];
                    }
                    this.list = data.data;
                } else {
                    this.$toast(msg);
                }
            })
        },
        submit() {
            if (this.current_index_date == 0) {
                if (this.choose_date == '') {
                    return this.$toast('请选择时间')
                }
                this.tips_date = `${this.current_year}-${this.current_month + 1 < 10 ? '0' + (this.current_month + 1) : this.current_month + 1}-${this.choose_date < 10 ? '0' + this.choose_date : this.choose_date}`;
                this.tips_date_timestamp = Math.floor(new Date(this.current_year, this.current_month, this.choose_date).getTime() / 1000);
            } else if (this.current_index_date == 1) {
                if (this.choose_weeks == '') {
                    return this.$toast('请选择时间')
                }
                let year = this.choose_weeks.split('-')[0];
                let month = this.choose_weeks.split('-')[1];
                let day = this.month_date[this.firstDayIndex].date;
                let end_day = this.month_date[this.lastDayIndex].date;
                this.tips_date = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}-${year}-${month < 10 ? '0' + month : month}-${end_day < 10 ? '0' + end_day : end_day}`;
                this.tips_date_timestamp = Math.floor(new Date(year, month - 1, day).getTime() / 1000);
            } else {
                if (!this.month_index && this.month_index !== 0) {
                    return this.$toast('请选择时间')
                }
                const lastDay = new Date(this.current_year, this.month_index + 1, 0).toLocaleDateString().replace(/\//g,'-'); 
                this.tips_date = `${this.current_year}-${this.month_index + 1 < 10 ? '0' + (this.month_index + 1) : this.month_index + 1}-01-${lastDay}`;
                this.tips_date_timestamp = Math.floor(new Date(this.current_year, this.month_index).getTime() / 1000);
            }
            this.getData();
            this.show = false;
        },
        tapDay(item) {
            let current_month = this.current_month;
            if (item.type == 'pre') {
                this.current_month = current_month - 1;

                if (this.current_month == -1) {
                    this.current_month = 11;
                    current_month = 11;
                    this.current_year = this.current_year - 1;
                }
                this.month_date = this.getDaysInCurrentMonth(this.current_year, current_month - 1);
                this.current_date = `${this.current_year}年${this.current_month + 1}月`
                this.choose_date = item.date;
            } else if (item.type == 'next') {
                this.current_month = current_month + 1;
                if (this.current_month == 12) {
                    this.current_month = 0;
                    current_month = -1;
                    this.current_year = this.current_year + 1;
                }
                this.month_date = this.getDaysInCurrentMonth(this.current_year, current_month + 1);
                this.current_date = `${this.current_year}年${this.current_month + 1}月`
                this.choose_date = item.date;
            } else {
                this.choose_date = item.date;
            }
        },
        tapWeek(item, index) {
            this.choose_weeks = `${this.current_year}-${this.current_month + 1}`;
            this.getWeekDetails(this.current_year, this.current_month, item.date, index);
        },
        handle_btn(current_index_date) {
            if (current_index_date == 0 && this.month_index !== null) {
                console.log(this.month_index, 'month_index====');
                this.month_date = this.getDaysInCurrentMonth(this.current_year, this.month_index + 1);
                this.current_date = `${this.current_year}年${this.month_index + 1}月`;
                this.current_month = this.month_index;
            } else if (current_index_date == 2) {
                // this.month_index = this.current_month;
            } else {
                // this.getWeekDetails(this.current_year, this.current_month, this.choose_date);
            }
            this.current_index_date = current_index_date;
        },
        handle_month(type = '') {
            let current_month = this.current_month;
            if (type == 'pre') {
                if (this.current_index_date == 2) {
                    this.current_year -= 1;
                    return;
                }
                this.current_month = current_month - 1;
                if (this.current_month == -1) {
                    this.current_month = 11;
                    current_month = 11;
                    this.current_year = this.current_year - 1;
                }
                this.month_date = this.getDaysInCurrentMonth(this.current_year, current_month - 1);

                this.current_date = `${this.current_year}年${this.current_month + 1}月`
            } else {
                if (this.current_index_date == 2) {
                    this.current_year += 1;

                    return;
                }
                this.current_month = current_month + 1;
                if (this.current_month == 12) {
                    this.current_month = 0;
                    current_month = -1;
                    this.current_year = this.current_year + 1;
                }
                this.month_date = this.getDaysInCurrentMonth(this.current_year, current_month + 1);

                this.current_date = `${this.current_year}年${this.current_month + 1}月`
            }

        },
        getDaysInCurrentMonth(year, month) {
            this.next_total = 0;
            this.prv_total = 0;
            const firstDay = new Date(year, month, 1); // 当月第一天
            const lastDay = new Date(year, month + 1, 0); // 当月最后一天
            const firstDayOfWeek = firstDay.getDay(); // 当月第一天是星期几 (0-6, 0 表示周日)
            const lastDayOfWeek = lastDay.getDay(); // 当月最后一天是星期几

            const daysArray = [];

            // 填充上个月的日期
            const prevMonthLastDay = new Date(year, month, 0).getDate(); // 上个月最后一天
            for (let i = 0; i < firstDayOfWeek; i++) {
                this.prv_total += 1;
                daysArray.unshift({ date: prevMonthLastDay - i, is_month: false, today: '', type: 'pre', choose_weeks: `${year}-${month + 1}` }); // 从上个月最后一天倒序填充
            }

            // 添加当月日期
            for (let day = 1; day <= lastDay.getDate(); day++) {
                daysArray.push({ date: day, is_month: true, today: `${new Date(year, month).getFullYear()}-${new Date(year, month).getMonth()}-${new Date(year, month, day).getDate()}`, type: 'current', choose_weeks: `${year}-${month + 1}` });
            }

            // 填充下个月的日期
            const nextMonthDaysNeeded = 6 - lastDayOfWeek; // 需要填充的下个月天数
            for (let i = 1; i <= nextMonthDaysNeeded; i++) {
                this.next_total += 1;
                daysArray.push({ date: i, is_month: false, today: '', type: 'next', choose_weeks: `${year}-${month + 1}` });
            }

            return daysArray;
        },
        tapMonth(item, index) {
            this.month_index = index;
        },
        handle_popup() {
            this.show = true;
        },
        getWeekDetails(year, month, day, click_index = 0) {
            this.weeks_index = [];
            // console.log(year, month, day);
            const date = new Date(year, month, day); // 创建日期对象
            const startOfYear = new Date(year, 0, 1); // 当年的第一天
            const firstDayOfWeek = startOfYear.getDay(); // 当年第一天是星期几 (0-6)
            const dayOfYear = Math.floor((date - startOfYear) / (24 * 60 * 60 * 1000)) + 1; // 当天是当年的第几天

            // 计算当前是第几周
            const weekNumber = Math.ceil((dayOfYear + firstDayOfWeek) / 7);

            // 计算该周的第一天
            const firstDayOfWeekDate = new Date(startOfYear);
            firstDayOfWeekDate.setDate(firstDayOfWeekDate.getDate() + (weekNumber - 1) * 7 - firstDayOfWeek);

            // 计算该周的最后一天
            const lastDayOfWeekDate = new Date(firstDayOfWeekDate);
            lastDayOfWeekDate.setDate(lastDayOfWeekDate.getDate() + 6);
            let firstDay = firstDayOfWeekDate.getDate();
            let lastDay = lastDayOfWeekDate.getDate();
            let middleDays = Array.from({ length: 5 }, (_, i) => firstDayOfWeekDate.getDate() + i + 1);
            this.middleDays = middleDays;
            this.firstDay = firstDay;
            this.lastDay = lastDay;
            if (this.month_date[click_index].type == 'next' && this.weeks_index.length < 5) {
                if (this.next_total >= 6) {
                    this.month_date = [];
                    let month = (this.current_date.split('年')[1].split('月')[0] * 1) - 1;
                    let year = this.current_date.split('年')[0] * 1;
                    if (month >= 12) {
                        month = 1;
                        year = year + 1;
                    } else {
                        month += 1;;
                    }
                    this.month_date = this.getDaysInCurrentMonth(year, month);
                    this.firstDayIndex = 0;
                    this.lastDayIndex = 6;
                    this.weeks_index.push(1, 2, 3, 4, 5);
                    this.current_date = `${year}年${month + 1}月`;
                    this.current_year = year;
                    this.current_month = month;
                    this.choose_weeks = `${year}-${month + 1}`;
                    return;
                }
                let index = this.month_date.length;
                this.firstDayIndex = index - 7
                this.lastDayIndex = index - 1;
                this.weeks_index.push(index - 6, index - 5, index - 4, index - 3, index - 2);
                return;
            }
            if (this.month_date[click_index].type == 'pre' && this.weeks_index.length < 5) {
                if (this.prv_total >= 5) {
                    this.month_date = [];
                    let month = (this.current_date.split('年')[1].split('月')[0] * 1) - 1;
                    let year = this.current_date.split('年')[0] * 1;
                    if (month <= 0) {
                        month = 12;
                        year = year - 1;
                    } else {
                        month -= 1;;
                    }
                    this.month_date = this.getDaysInCurrentMonth(year, month);
                    let index = this.month_date.length
                    this.firstDayIndex = index - 7;
                    this.lastDayIndex = index - 1;
                    this.weeks_index.push(index - 6, index - 5, index - 4, index - 3, index - 2);
                    this.current_date = `${year}年${month + 1}月`;
                    this.current_year = year;
                    this.current_month = month;
                    this.choose_weeks = `${year}-${month + 1}`;
                    return;
                }
                this.firstDayIndex = 0
                this.lastDayIndex = 6;
                this.weeks_index.push(1, 2, 3, 4, 5);
                return;
            }
            this.month_date.forEach((item, index) => {
                if (this.month_date[click_index].type == 'next' && this.weeks_index.length < 5) {
                    let index = this.month_date.length;
                    console.log(index, 'index==');
                    this.firstDayIndex = index - 7
                    this.lastDayIndex = index;
                    this.weeks_index.push(index - 6, index - 5, index - 4, index - 3, index - 2);
                    return;
                }
                if (item.date == firstDay) {
                    let _index = index + 6
                    if (this.month_date[_index] && this.month_date[_index].date == lastDay) {
                        this.firstDayIndex = index;
                        if (this.weeks_index.length < 5) {
                            this.weeks_index.push(index + 1, index + 2, index + 3, index + 4, index + 5);
                        }
                    }
                }
                if (item.date == lastDay) {
                    this.lastDayIndex = index;
                    if (item.date == lastDay && this.weeks_index.length < 5) {
                        if ((this.month_date[click_index].date == firstDay && this.month_date[click_index + 6].date == lastDay)) {
                            this.weeks_index.push(click_index + 1, click_index + 2, click_index + 3, click_index + 4, click_index + 5);
                        }
                    }
                }


            })
        },
    }
};
</script>

<style scoped lang='scss'>
.footer {
    position: fixed;
    padding: 2.1875rem 1.125rem;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background-color: #F5F5F5;

    .current-page {
        width: 2.625rem;
        height: 2.25rem;
        color: #fff !important;
        border: 1px solid var(--themeBaseColor) !important;
        background: var(--themeBaseColor) !important;
        border-radius: 0rem 0rem 0rem 0rem;
    }

    .box-center {
        width: 2.625rem;
        height: 2.25rem;
        background: #FFFFFF;
        border-radius: 0rem 0rem 0rem 0rem;
        border: .0313rem solid #D6D6DC;
        font-weight: 500;
        font-size: .9375rem;
        color: #3B3B4A;
        display: flex;
        align-items: center;
        background-color: #fff;
        justify-content: center;
    }

    .box {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .not {
        border: 1px solid #D6D6DC !important;
        color: #999999 !important;
    }

    .box-left,
    .box-right {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 4.0625rem;
        height: 2.25rem;
        border-radius: 0rem 0rem 0rem 0rem;
        text-align: center;
        border: .0313rem solid #D6D6DC;
        font-weight: 500;
        background-color: #fff;
        font-size: .875rem;
        color: #3B3B4A;
    }
}

.default-month {
    color: var(--themeBaseColor);
    position: relative;

    &::after {
        content: "";
        position: absolute;
        bottom: -0.3125rem;
        width: .375rem;
        height: .375rem;
        border-radius: 50%;
        background: var(--themeBaseColor);
    }
}

.content {
    width: 100%;
    overflow-x: scroll;
    padding-bottom: 9.375rem;

    .head-1 {
        width: 4.6875rem;
        padding: 0 1.5625rem;
        text-align: center;
        text-wrap: nowrap;
        line-height: 1;
    }

    .head-2 {
        width: 6.25rem;
        text-wrap: nowrap;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    .content-wrapper:first-child {
        font-weight: bold;
        font-size: .875rem;
        color: #00001C;
    }

    .content-wrapper {
        width: max-content;
        display: flex;
        align-items: center;
        height: 3rem;
    }

    .content-wrapper:nth-child(n+1) {
        background-color: #fff;
    }

    .content-wrapper:nth-child(2n) {
        background-color: transparent;
    }
}

.month-group .middleDays-left{
    &::after{
    left: -30px !important;
    }
}
.month-group .middleDays-right{
    &::after{
    right: -30px !important;
    }
}

.middleDays {
    position: relative;

    &::after {
        z-index: -2 !important;
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: unset !important;
        height: 2.25rem;
        opacity: 0.1;
        background: var(--themeBaseColor) !important;
        border-radius: 0 !important;
    }
}

.choose-index {
    color: #fff !important;
    position: relative;

    &::after {
        z-index: 2;
        content: "";
        position: absolute;
        width: 2.25rem;
        height: 2.25rem;
        background: var(--themeBaseColor) !important;
        border-radius: .3125rem .3125rem .3125rem .3125rem;
    }
}

.month-line {
    height: .9375rem;
    width: 100%;
    box-shadow: 0rem .1875rem .4375rem .0313rem rgba(181, 181, 181, 0.16);
    margin-bottom: 2.4375rem;

}

.month-item-current {

    background: var(--themeBaseColor) !important;
    color: #fff;
}

.month-item {
    display: inline-block;
    width: 25%;
    margin: 0 0 3.0625rem;
    line-height: 1;
    font-weight: 500;
    font-size: .875rem;
    color: #00001C;

    div {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        background: #fff;
        border-radius: .3125rem .3125rem .3125rem .3125rem;
        margin: 0 auto;
    }
}

.c-C0C4CC {
    color: #C0C4CC !important;
}

.month-group {
    display: grid; // 使用grid布局
    grid-template-columns: repeat(7, 1fr); // 定义七列，每列宽度相等
    gap: 1rem 0; // 设置列间距

    .default-today {
        color: var(--themeBaseColor);
        position: relative;

        &::after {
            content: "";
            position: absolute;
            bottom: -0.3125rem;
            width: .375rem;
            height: .375rem;
            border-radius: 50%;
            background: var(--themeBaseColor);
        }
    }

    div {
        position: relative;
        margin: 0 auto;
        width: 100%;
        height: 2.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        font-size: .8125rem;
        color: #00001C;

        &::after {
            z-index: -1;
            content: "";
            position: absolute;
            width: 2.25rem;
            height: 2.25rem;
            background: var(--themeBaseColor);
            background: #fff;
            border-radius: .3125rem .3125rem .3125rem .3125rem;
        }
    }

    padding-bottom: 2.5rem;



}

.week-group {
    display: flex;
    align-items: center;
    margin-top: 1.4688rem;
    padding-bottom: .5313rem;
    margin-bottom: 1.3438rem;
    box-shadow: 0rem .1875rem .4375rem .0313rem rgba(181, 181, 181, 0.16);

    div {
        flex: 1;
        font-weight: 500;
        font-size: .8125rem;
        color: #00001C;
        line-height: 1;
    }
}

.current-date {
    font-weight: bold;
    font-size: .9375rem;
    color: #3B3B4A;
    line-height: 1;
    justify-content: center;
}

.highlight {
    position: relative;
    border: 1px solid var(--themeBaseColor) !important;
    color: var(--themeBaseColor) !important;

    &::after {
        position: absolute;
        opacity: 0.1;
        content: '';
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: var(--themeBaseColor);
    }
}

.choose-content {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.0625rem;
    margin-bottom: 1.0625rem;
}

.line {
    width: 100%;
    height: 1px;
    background-color: #F0F0F1;
    margin-bottom: 1.0313rem;
}

.date-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.75rem;
    height: 2rem;
    border-radius: .375rem .375rem .375rem .375rem;
    border: .0313rem solid #AAAAB3;
}

.head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: .9375rem .625rem;
}
</style>